<template>
  <div class="moments-list">
    <moment-item
      v-for="moment in moments"
      :key="moment.id"
      :moment="moment"
      @like="$emit('like', moment.id)"
      @comment="$emit('comment', moment.id)"
      @delete="$emit('delete', moment.id)">
    </moment-item>
  </div>
</template>

<script>
import MomentItem from './MomentItem.vue'

export default {
  components: {
    MomentItem
  },
  props: {
    moments: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
.moments-list {
  padding: 15px;
  max-width: 800px;
  margin: 0 auto;
}
</style> 